<template>
	<view>
		<!-- 不同意协议就会弹起 -->
		<u-overlay :show="overlayShow" @click="overlayClick" opacity="0.01"></u-overlay>

		<u-popup :show="show" mode="bottom" :safeAreaInsetBottom="false" round="20rpx" customStyle="padding:26rpx">
			<view class="u-flex u-row-start">
				<view v-if="fileName" class="u-flex u-row-start">
					<u-avatar :src="fileName" size="60rpx"></u-avatar>
					<view class="iot-name">{{name}}<text class="u-p-l-10">申请</text></view>
				</view>
				
				<view v-else class="u-flex u-row-start">
					<u-avatar :src="`${staticFileUrl}/image/user-agreement/logo.png`" size="60rpx"></u-avatar>
					<view class="iot-name">江西圣郎品牌运营管理有限公司<text class="u-p-l-10">申请</text></view>
				</view>
			</view>
			<view class="user-info">获取用户头像、昵称等信息</view>
			<view class="protocol">
				为了保障您的权益，请您阅读并允许
				<text class="protocol-color">
					<text @click="nav('pages-other/privacy-policy/privacyPolicy')">《用户隐私协议》</text>
					<!-- <text>《用户服务协议》</text> -->
				</text>
			</view>
			<view class="u-flex u-row-around u-m-t-90 u-m-b-40">
				<u-button text="取消" :customStyle="cancelBtn" @click="cance()"></u-button>
				<u-button text="允许" :customStyle="allowBtn" @click="allow()"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "user-agreement",
		data() {
			return {
				imageUrl: this.$configPath.imageUrl,
				staticFileUrl: this.$configPath.staticFileUrl,
				cancelBtn: {
					width: '230rpx',
					height: '80rpx',
					borderRadius: '20rpx',
					background: 'rgb(239,242,243)',
					color: 'rgb(4,190,94)',
					borderColor: 'rgb(239,242,243)'
				},
				allowBtn: {
					width: '230rpx',
					height: '80rpx',
					borderRadius: '20rpx',
					background: 'rgb(4,190,94)',
					color: 'rgb(239,242,243)',
					borderColor: 'rgb(4,190,94)'
				},
				officialAccountOpenId: '',
				overlayShow: false,
				fileName: '',
				name: ''
			};
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			inDeviceNo: {
				type: String,
				default: ''
			},
			inHierarchy: {
				type: String,
				default: ''
			},
			inFreightLane: {
				type: String,
				default: ''
			},
		},
		mounted() {
			this.$api("member.findUnionIdThereById", {
				'deviceNo': this.inDeviceNo
			}).then(res => {
				if (res.status == 0) {
					this.show = res.data.isGet;
					if (res.data.officialAccountOpenId) {
						this.officialAccountOpenId = res.data.officialAccountOpenId;
					}
					if (res.data.mobileLogoFileName) {
						this.name = res.data.name;
						this.fileName = this.imageUrl.concat(res.data.mobileLogoFileName);
					}
					
				} else {
					this.$helpers.toast(res.msg);
				}
			}).catch(err => {
				this.$helpers.toast('网络不稳定,请求超时!');
			})
		},
		methods: {
			cance() {
				this.show = false
				this.overlayShow = true
			},
			allow() {
				this.$api("member.acquiredInfo").then(res => {
					if (res.status == 0) {
						this.show = false
						if (this.overlayShow) {
							this.overlayShow = false
						}
						let ua = window.navigator.userAgent.toLowerCase()
						if (ua.match(/MicroMessenger/i) == 'micromessenger') {
							// 微信才需要重新跳转
							this.getMemberInfo();
						}
					} else {
						getApp().err("保存不成功：" + res.msg);
					}
				}).catch(err => {
					getApp().err("保存不成功_2：" + err);
				})
			},
			overlayClick() {
				// this.$helpers.toast("遮罩点击");
				this.show = true
				this.overlayShow = false
			},
			getMemberInfo() {
				if (this.$u.test.isEmpty(this.inDeviceNo)) {
					this.$helpers.toast("设备号为空");
					return
				}
				
				let u = this.$configPath.baseURL.concat('/api/weixin/getMemberInfo?d=').concat(this.inDeviceNo)
									.concat("&officialAccountOpenId=").concat(this.officialAccountOpenId);
				
				if (!this.$u.test.isEmpty(this.inHierarchy) && !this.$u.test.isEmpty(this.inFreightLane)){
					u = u.concat("&h=").concat(this.inHierarchy);
					u = u.concat("&f=").concat(this.inFreightLane);
				}
				
				console.log("u", u)
				window.location.href = u;
			},
			nav(u) {
				uni.navigateTo({
					url: u
				});
			},
		}
	}
</script>

<style lang="scss">
	.iot-name {
		font-weight: 500rpx;
		font-size: 30rpx;
		margin-left: 20rpx;
	}

	.user-info {
		font-size: 500rpx;
		font-size: 32rpx;
		margin-top: 40rpx;
		margin-bottom: 30rpx;
	}

	.protocol {
		color: rgba(0, 0, 0, 0.6);
		font-size: 28rpx;

		.protocol-color {
			color: rgb(4, 190, 94);
		}
	}
</style>
